<template>
  <a-modal :title="title" :width="400" :visible="visible" :confirmLoading="submitLoading" @ok="handleOk"
    @cancel="visible = false" ok-text="完成选择">
    <div v-if="treeData.length > 0">
      <a-tree v-model="checkedKeys" :tree-data="treeData" :defaultExpandedKeys="expandedKeys"
        :replaceFields="{ title: 'orgName', key: 'orgId' }" @check="checkClick" checkStrictly checkable>
      </a-tree>
    </div>
    <a-empty v-show="treeData.length === 0" style="margin: 50px auto;" />
  </a-modal>
</template>

<script>
import {
  orgGetMenuTree
} from '@/api/human/relationOrg'
export default {
  name: 'orgTree',
  data() {
    return {
      title: "组织选择",
      visible: false,
      enterpriseId: "",
      submitLoading: false,

      treeData: [],
      checkedKeys: [],
      checkedNames: [],
      selectedKeys: [],
      expandedKeys: [],
    }
  },
  watch: {

  },
  methods: {
    add(id, treeKey, treeName) {
      this.visible = true;
      if (id) {
        this.enterpriseId = id;
        this.checkedKeys = [];
        this.checkedNames = [];
        this.expandedKeys = [];
        this.initMenuTree(id)
      }
      if (treeName.length > 0) {
        this.checkedNames = treeName;
        this.checkedKeys = treeKey;
        this.expandedKeys = treeKey;
      }
    },
    async initMenuTree(id) {
      const { code, data } = await orgGetMenuTree(id);
      if (code === '1') {
        this.treeData = data;
      }
    },
    checkClick(keys, e) {
      let array = [];
      if (e.checkedNodes.length > 0) {
        e.checkedNodes.forEach(item => {
          array.push(item.data.props.orgName)
        })
      }
      this.checkedNames = array;
    },
    handleOk() {
      let orgObj = {
        name: this.checkedNames,
        key: this.checkedKeys.checked || this.checkedKeys
      }
      // console.log(this.checkedNames);
      this.visible = false;
      this.$emit('on-tree', orgObj)
    }
  }
}
</script>
